<template>
    <ContentField>
        <div class="row">
            <div class="col-3">
                <UserProfileInfo :user="user" @follow="follow" @unfollow="unfollow" />
                <UserProfileEdit @submit_a_post="submit_a_post"/>
            </div>
            <div class="col-9">
                <UserProfilePosts :post_list="post_list" />
            </div>
        </div>
    </ContentField>
</template>

<script>
import ContentField from '../components/ContentField.vue';
import UserProfileInfo from '../components/UserProfileInfo.vue';
import UserProfilePosts from '../components/UserProfilePosts.vue';
import UserProfileEdit from '../components/UserProfileEdit.vue';
import { reactive } from 'vue';

export default {
    name: 'UserProfileView',
    components: {
        ContentField,
        UserProfileInfo,
        UserProfilePosts,
        UserProfileEdit,
    },
    setup(){
        let user = reactive({   //用户的信息
            id: 1,
            username: 'lky',
            followersCount: 0,
            is_followed: false,
        });

        let post_list = reactive({  //该用户的历史帖子列表
            count: 4,
            posts: [
                {
                    id: 1,
                    user_id: 1,
                    content: '今天上了vue，真开心！',
                },
                {
                    id: 2,
                    user_id: 1,
                    content: 'C++真有意思！',
                },
                {
                    id: 3,
                    user_id: 1,
                    content: '算法太难了！',
                },
                {
                    id: 4,
                    user_id: 1,
                    content: '中午吃了炸鸡！',
                },
            ]
        });

        const follow = () => {
            if(user.is_followed) return;
            user.is_followed = true;
            user.followersCount ++;
        };

        const unfollow = () => {
            if(!user.is_followed) return;
            user.is_followed = false;
            user.followersCount --;
        };

        const submit_a_post = content => {
            post_list.posts.unshift({
                id: post_list.count + 1,
                user_id: 1,
                content: content.value,
            })
        };

        return {
            user,
            follow,
            unfollow,
            post_list,
            submit_a_post,
        }
    }
}
</script>

<style scoped>

</style>